<template>
  <div class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
    <div class="row">
      <div class="col-md-12">
        <div class="map-img" id="mapDiv"></div>
      </div>
      <div class="right-wrap">
        <div class="top-search-box">
          <form class="form-inline">
            <div class="form-group">
              <input style="width:300px;" type="text" name="keyword" id="keyword" placeholder="请输入关键词"
                     class="input-sm form-control">
            </div>
            <div class="form-group">
              <button type="button" class="btn btn-sm btn-primary" @click="search()">搜索</button>
              <button type="reset" class="btn btn-sm btn-dafault">重置</button>
            </div>
          </form>
        </div>
        <div class="table-wrap">
          <div class="left">
            <li :class="[leftNav===1 ? 'active':'']" @click="changeLeftNav(1)">河道</li>
            <li :class="[leftNav===2 ? 'active':'']" @click="changeLeftNav(2)">渠道</li>
            <li :class="[leftNav===3 ? 'active':'']" @click="changeLeftNav(3)">水库</li>
          </div>
          <div class="table-box">
            <table class="table table-bordered table-striped leftNavTable1 table-hover">
              <thead>
              <tr>
                <th>河道名称</th>
                <th>河道长度(km)</th>
                <th>河道宽度(m)</th>
              </tr>
              </thead>
              <tbody>
              <tr v-if="rivers != null && rivers.length > 0" v-for="(river, index) in rivers" :value="river.id">
                <td class="name" style="cursor: pointer" @click="toRiverRecord(river)">{{river.name}}</td>
                <td>{{river.lengths}}</td>
                <td>{{river.width}}</td>
              </tr>
              </tbody>
            </table>
            <table class="table table-bordered table-striped leftNavTable2 hide table-hover">
              <thead>
              <tr>
                <th>渠道名称</th>
                <th>所在灌区</th>
                <th>渠道类型</th>
              </tr>
              </thead>
              <tbody>
              <tr v-if="channels != null && channels.length > 0" v-for="(obj, index) in channels" :value="obj.id">
                <td class="name">{{obj.name}}</td>
                <td>{{obj.irrigatedArea}}</td>
                <td>{{obj.type}}</td>
              </tr>
              </tbody>
            </table>
            <table class="table table-bordered table-striped leftNavTable3 hide table-hover">
              <thead>
              <tr>
                <th>水库名称</th>
                <th>库容(万方)</th>
                <th>行政区划</th>
              </tr>
              </thead>
              <tbody>
              <tr v-if="reservoirs != null && reservoirs.length > 0" v-for="(obj, index) in reservoirs" :value="obj.id">
                <td class="name">{{obj.name}}</td>
                <td>{{obj.capacity}}</td>
                <td>{{obj.areaNames.split(',')[obj.areaNames.split(',').length-1]}}</td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
  .map-img {
    width: 100%;
    height: 100vh;
  }

  .right-wrap {
    position: fixed;
    right: 0;
    top: 100px;
    padding: 30px;
    background: #fff;
    z-index: 99999
  }

  .table-wrap {
    display: flex;
    margin-top: 20px;
  }

  .table-wrap .left {
    width: 30px;
    text-align: center;
    flex-shrink: 1;
    margin-right: 10px;
  }

  .table-wrap .left li {
    list-style: none;
    margin-bottom: 10px;
    cursor: pointer;
  }

  .table-wrap .left li.active {
    color: #29a8e8;
    border-bottom: 1px solid #29a8e8;
  }

  .table-wrap .table-box {
    width: 350px;
    text-align: center;
    flex-shrink: 1;
  }

  .table-wrap .table-box .name {
    color: #29a8e8;
  }

  #mapDiv img {
    max-width: none;
  }
</style>
<script type="text/javascript">
  import '@/assets/css/style.css'
  import $ from '@/assets/js/jquery-vendor.js'
  import axios from 'axios'
  import {$storage, site} from '@/assets/js/boss'
  import {mapGetters} from 'vuex'
  import '@/assets/js/datepicker-vendor.js'
  import '@/assets/js/pageTag'
  import '#/js/d3.min'
  // import '#/js/D3SvgOverlay'

  export default {
    data() {
      return {
        result: {
          data: {
            pageIndex: 1,
            data: []
          }
        },
        tagPages: '',
        map: null,
        countries: [],
        countriesOverlay: null,
        d3: window.d3,
        leftNav: 1,
        rivers: [],
        reservoirs: [],
        channels: []
      }
    },
    mounted() {
      let that = this;

      this.$store.dispatch('Init_Api').then(res => {
        that.onLoad();
      })
      that.riverList();
      that.reservoirList();
      that.channelList();
    },
    computed: {
      ...mapGetters([
        'TDTWMTSLayer', 'Extent', 'Map', 'GraphicsLayer', 'TDTLyr', 'TDTAnnoLayer', 'ArcGISDynamicMapServiceLayer'
      ])
    },
    methods: {
      changeLeftNav(i) {
        this.leftNav = i;
        $('.table').addClass('hide');
        $('.leftNavTable' + i).removeClass('hide');
      },
      onLoad: function () {
        // 地图相关操作
        var map;
        /*
               * 初始化地图控件，并大致指定地图显示范围为山东省
               */
        map = new this.Map('mapDiv', {
          logo: false,
          slider: false,
          nav: false,
          showLabels: true, // 非常重要；显示标注用
          extent: new this.Extent({
            xmin: 104.253301,
            ymin: 29.461215,
            xmax: 105.336828,
            ymax: 30.138248,
            spatialReference: {
              wkid: 4490
            }
          })
        });
        /*
               * 加载天地图
               */
        var baseLayer = new this.TDTLyr();
        var layer = new this.ArcGISDynamicMapServiceLayer(window.map_arcgis + '/rest/services/fwx/MapServer', {
          'id': 'fwx'
        });
        // map.addLayer(baseLayer1, 2);

        map.addLayer(baseLayer, 0);
        map.addLayer(layer, 5);
        // map.addLayer(layer, 3);

        // let that = this;
        // let T = window.T;
        // let bounds = new T.LngLatBounds(new T.LngLat(104.44016, 29.54718), new T.LngLat(105.12817, 30.04176));
        // that.map = new T.Map('mapDiv', {
        //     maxBounds: bounds
        // });
        // // map.setMapType(window.TMAP_HYBRID_MAP);
        // that.map.enableScrollWheelZoom();
        // let mapTypeSelect = [{
        //     'title': '地图', // 地图控件上所要显示的图层名称
        //     'icon': 'https://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png', // 地图控件上所要显示的图层图标（默认图标大小80x80）
        //     'layer': window.TMAP_NORMAL_MAP // 地图类型对象，即MapType。
        // }, {
        //     'title': '卫星',
        //     'icon': ' https://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png',
        //     'layer': window.TMAP_SATELLITE_MAP
        // }, {
        //     'title': '卫星混合',
        //     'http': 'api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png',
        //     'layer': 'TMAP_HYBRID_MAP'
        // }, {
        //     'title': '地形',
        //     'icon': ' https://api.tianditu.gov.cn/v4.0/image/map/maptype/terrain.png',
        //     'layer': window.TMAP_TERRAIN_MAP
        // }, {
        //     'title': '地形混合',
        //     'icon': ' https://api.tianditu.gov.cn/v4.0/image/map/maptype/terrainpoi.png',
        //     'layer': window.TMAP_TERRAIN_HYBRID_MAP
        // }];
        // let ctrl = new T.Control.MapType({
        //     mapTypes: mapTypeSelect
        // }); // 初始化地图类型选择控件
        //
        // that.map.addControl(ctrl); // 添加地图选择控件
        //
        // that.map.setMapType(window.TMAP_HYBRID_MAP); // 设置地图位地星混合图层
        // that.map.centerAndZoom(new T.LngLat(104.80607838081271, 29.799075604255809), 10);
        //
        // // 高亮显示资中区域
        // that.countriesOverlay = new T.D3Overlay(that.init, that.redraw);
        // let jsonData = require('../../assets/js/zizhong_only.json'); // 加载资中坐标JSON
        // that.countries = jsonData.features;
        // that.map.addOverLay(that.countriesOverlay)
        // that.countriesOverlay.bringToFront();
      },
      init(sel, transform) {
        let that = this;
        let upd = sel.selectAll('path.geojson').data(that.countries);
        upd.enter()
          .append('path')
          .attr('class', 'geojson')
          .attr('stroke', 'yellow')
          .attr('stroke-width', 3)
          .attr('fill', function (d, i) {
            return that.d3.hsl(Math.random() * 360, 0.9, 0.5)
            // return d3.rgb('');
          })
          .attr('fill-opacity', '0')
      },
      redraw(sel, transform) {
        let that = this;
        sel.selectAll('path.geojson').each(
          function (d, i) {
            that.d3.select(this).attr('d', transform.pathFromGeojson);
          }
        )
      },
      riverList() { // 获取河道数据
        let that = this;
        let keyword = $('#keyword').val();
        axios.get(site.riverInfo.list + '?keyword=' + keyword, {}).then(function (response) {
          var result = response.data;
          if (result.code === 0) {
            that.rivers = result.data;
          } else {
            alert(result.message);
          }
        });
      },
      channelList() { // 获取渠道数据
        let that = this;
        let keyword = $('#keyword').val();
        axios.get(site.channelInfo.list + '?keyword=' + keyword, {}).then(function (response) {
          var result = response.data;
          if (result.code === 0) {
            that.channels = result.data;
          } else {
            alert(result.message);
          }
        });
      },
      reservoirList() { // 获取水库数据
        let that = this;
        let keyword = $('#keyword').val();
        axios.get(site.reservoirInfo.list + '?keyword=' + keyword, {}).then(function (response) {
          var result = response.data;
          if (result.code === 0) {
            that.reservoirs = result.data;
          } else {
            alert(result.message);
          }
        });
      },
      search() { // 检索
        this.riverList();
        this.channelList();
        this.reservoirList();
      },
      toRiverRecord(river) { // 点击河道弹出一河一档界面
        $storage.setItem('/river/riverRecord/riverId', river.id);
        this.lbox.openMyBoxLayer(river.name, '/river/riverRecord?riverId=' + river.id);
      }
    }
  }
</script>
